<template>
  <view>
    <Header />
    <view class="change-shop" id="changeShop">
      <swiper />
      <!-- <view class="change-school">
        <u-section
          :title="postion"
          :bold="true"
          :font-size="28"
          sub-title="切换位置"
          color="#D65C45"
        >
          <template v-slot:right>
            <view class="right" @click="changePosition">
              <view class="icon-weizhidingwei iconfont icon"> </view>
              <view> 切换位置</view>
            </view>
          </template>
        </u-section>
      </view> -->

      <view class="selection-style">
        <view
          style="
            color: #969799;
            padding: 20rpx;
            border-bottom: 1rpx solid #e6e6e6;
          "
        >
          店铺列表（附近有{{ receiveData.length }}个店铺）
        </view>
        <view v-if="receiveData.length >= 1">
          <view
            class="shop"
            v-for="(item, index) in receiveData"
            :key="index"
            @click="toShop(item)"
          >
            <image :src="item.profile_pic" class="image" />
            <view class="shop-info">
              <view class="left">
                <view class="shop-name u-line-2">{{ item.nickname }}</view>
                <view
                  :class="[
                    item.open_status == 1 ? 'status_open' : 'status_close',
                  ]"
                  >{{ item.open_status == 1 ? "营业中" : "休息中" }}</view
                >
                <view class="postion"> {{ item.address }}</view>
              </view>

              <view
                class="right"
                :style="{
                  backgroundColor:
                    item.open_status == 1 ? '#d65c45' : '#CCCCCC',
                }"
              >
                <!-- <view class="shop-dis">{{ item.radius }}</view> -->
                <view class="go-shop">进店选购</view>
              </view>
            </view>
          </view>
        </view>
        <view v-else class="no-shop"> 抱歉该地区暂无店铺哦.... </view>
      </view>

      <u-back-top
        :scroll-top="scrollTop"
        :z-index="100"
        :icon-style="iconStyle"
        :custom-style="iconStyle"
        top="600"
        icon="arrow-up"
        tips="顶部"
      ></u-back-top>
    </view>
  </view>
</template>

<script>
// const cityData = require("@/common/picker.city.js");
import Swiper from "@/common/components/swiper";
import Header from "@/pages/index/components/header";
export default {
  components: {
    Swiper,
    Header,
  },
  data() {
    return {
      receiveData: [{}],
      postion: "定位失败，请手动选择",
      scrollTop: 0,
      iconStyle: {
        fontSize: "40rpx",
        color: "#D65C45",
      },
    };
  },
  onPageScroll(e) {
    this.scrollTop = e.scrollTop;
  },
  methods: {
    change(index) {
      this.current = index;
    },
    choose(index) {
      this.list[0].name = index;
      this.current++;
    },
    /**
     * 更换地址
     */
    changePosition() {
      var _this = this;
      uni.authorize({
        scope: "scope.userLocation",
        success(res) {
          _this.chooseLocationAgin();
        },
        fail() {
          // 定位权限未开启，引导设置
          uni.showModal({
            title: "温馨提示",
            content: "您已拒绝定位,请开启",
            confirmText: "去设置",
            success(res) {
              if (res.confirm) {
                // 打开设置
                uni.openSetting({
                  success(res) {
                    _this.chooseLocationAgin();
                  },
                });
              }
            },
          });
        },
      });
    },
    /**
     * 选择地理位置
     */
    chooseLocationAgin() {
      var _this = this;
      uni.chooseLocation({
        success: function (res) {
          _this.postion = res.name;
          _this.getShopList(res.longitude, res.latitude);
          var form = {
            addressName: res.name,
            detailAddress: res.address,
            latitude: res.latitude,
            longitude: res.longitude,
          };
          _this.$u.vuex("vuex_default_address", form);
        },
        fail: function (res) {
          _this.$u.toast("位置获取失败");
        },
      });
    },

    /**
     * 初始化位置
     */
    // initPostion() {
    //   var _this = this;
    //   uni.chooseLocation({
    //     success: function (res) {
    //       _this.postion = res.name;
    //       // 获取店铺list
    //       _this.getShopList(res.longitude, res.latitude);
    //       var form = {
    //         addressName: res.name,
    //         detailAddress: res.address,
    //         latitude: res.latitude,
    //         longitude: res.longitude,
    //       };
    //       _this.$u.vuex("vuex_default_address", form);
    //     },
    //     fail: function (res) {
    //       _this.$u.toast("获取位置信息失败，请手动选择");
    //     },
    //   });
    // },
    /**
     * 根据经纬度 获取店铺列表
     */
    getShopList(longitude, latitude) {
      var form = {
        latitude: latitude,
        longitude: longitude,
      };
      this.$u.api.shopListApi(form).then((res) => {
        this.receiveData = res;
      });
    },
    /**
     * 去购物
     */
    toShop(Info) {
      this.$u.route({
        url: "/pages/shop/shop",
        params: Info,
      });
    },
  },
  watch: {
    vuex_default_address(newV, oldV) {
      // 获取店铺
      this.getShopList(newV.longitude, newV.latitude);
    },
  },
  onShow() {
    if (!this.vuex_default_address.hasOwnProperty("addressName")) {
      this.changePosition();
    } else {
      this.postion = this.vuex_default_address.addressName;
      // 获取店铺
      this.getShopList(
        this.vuex_default_address.longitude,
        this.vuex_default_address.latitude
      );
    }
  },
};
</script>

<style scoped lang ='scss' >
@mixin flex-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.change-shop {
  padding: 10rpx 20rpx;
  background-color: #f7f7f7;
  min-height: 100vh;
  .change-school {
    background-color: #ffffff;
    padding: 40rpx 20rpx;
    border-radius: 20rpx;
    /* box-shadow: 3rpx 5rpx 15rpx 5rpx #e6e6e6; */
    .right {
      @include flex-row;
      .icon {
        margin-right: 10rpx;
        color: #d65c45;
      }
    }
  }

  .selection-style {
    border-radius: 20rpx;
    background-color: #f7f7f7;
    /* padding-top: 10rpx; */
    margin-top: 20rpx;
    /* box-shadow: 3rpx 5rpx 15rpx 5rpx #e6e6e6; */
    .no-shop {
      text-align: center;
      padding: 40rpx 0;
    }
    .shop:last-child {
      border-bottom: none;
    }
    .shop {
      @include flex-row;
      border-bottom: 1rpx solid #e6e6e6;
      /* padding: 0 30rpx; */
      /* padding-bottom: 10rpx; */
      padding-left: 20rpx;
      /* margin-top: 20rpx; */
      /* margin: 5rpx 0; */
      border-radius: 20rpx;
      background-color: #FFFFFF;
      margin: 20rpx 0;
      .image {
        width: 141rpx;
        height: 141rpx;
        border-radius: 10rpx;
        box-shadow: 3rpx 5rpx 15rpx 5rpx #e6e6e6;
      }
      .shop-info {
        flex: 1;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        /* padding: 30rpx; */
        height: 200rpx;
        .left {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: flex-start;
          padding: 20rpx 0 20rpx 20rpx;
          height: 100%;
          flex: 1;
          .shop-name {
            color: #333333;
            font-size: 30rpx;
            font-weight: bold;
          }
          .shop-dis {
            color: #333333;
            font-size: 26rpx;
          }
          .status_open {
            background-image: url("@/static/shop/shop/open.png");
            width: 100rpx;
            height: 32rpx;
            line-height: 32rpx;
            color: #ffffff;
            font-size: 24rpx;
            text-align: center;
            background-size: 100% 100%;
          }
          .status_close {
            background-image: url("@/static/shop/shop/close.png");
            width: 100rpx;
            height: 32rpx;
            line-height: 32rpx;
            color: #ffffff;
            font-size: 24rpx;
            text-align: center;
            background-size: 100% 100%;
          }
        }
        .right {
          display: flex;
          height: 100%;
          width: 200rpx;
          text-align: center;
          /* margin-bottom: 10rpx; */
          flex-direction: column;
          justify-content: center;
          align-items: center;
          background-color: #d65c45;
          border-top-right-radius: 20rpx;
          border-bottom-right-radius: 20rpx;
          color: #ffffff;
          .go-shop {
            font-size: 28rpx;
            font-weight: bold;
          }
        }
        .postion {
          font-size: 24rpx;
          color: #a9a9a9;
        }
        /* & > view {
          @include flex-row;
          margin-bottom: 20rpx;



        } */
      }
    }
  }
}
</style>
